<template>
	<view>
        <uni-section v-if="picFiles.length>0" title="图片" type="line" padding>
			<uni-grid :column="3" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in picFiles" :index="index" :key="'img-'+item.id+'-'+index">
                    <view class="grid-item-box" @click="viewImages(item,index)">
                        <image class="image" :src="item.thumbnail" mode="aspectFit" />
                    </view>
				</uni-grid-item>
			</uni-grid>
		</uni-section>

        <uni-section v-if="pdfFiles.length+normalFiles.length>0" title="文件" type="line" padding>
            <uni-list>
                <uni-list-item v-bind:key="'pdf-'+item.id+'-'+index" v-for="(item ,index) in pdfFiles" :title="item.title"></uni-list-item>
                <uni-list-item v-bind:key="'file-'+item.id+'-'+index" v-for="(item ,index) in normalFiles" :title="item.title"></uni-list-item>
            </uni-list>
        </uni-section>
	</view>
</template>

<script>
    import * as env from '../../env';
    import { getAuthorization } from '@/utils/auth';

	export default {
        props:{
            files:Array
        },
		data() {
			return {
				picFiles:[],
                pdfFiles:[],
                normalFiles:[]
			}
		},
        watch:{
            files(){
                this.init();
            }
        },
		created() {
            this.init();
		},
		methods: {
            init(){
                this.picFiles=[];
                this.normalFiles=[];
                for(const f of this.files){
                    f.thumbnail = env.fileUrl + '/api/file/download-file?type=file_thumbnail&f='+f.path +'&access_token='+getAuthorization();
                    f.url = env.fileUrl + '/api/file/download-file?type=file&f='+f.path +'&access_token='+getAuthorization();
                    if(f.type=='Picture'){
                        this.picFiles.push(f);
                    }else if(f.type=='PDF'){
                        this.pdfFiles.push(f);
                    }else{
                        this.normalFiles.push(f);
                    }
                }
            },
            viewImages(item,index){
                let urls = [];
                for(let pic of this.picFiles){
                    urls.push(pic.url);
                }
                console.log(item,index);
                uni.previewImage({
                    current:index,
                    urls:urls
                })
            }
		}
	}
</script>

<style type="scss">
    .image {
		max-width: 180rpx;
        max-height: 180rpx;
	}

    .grid-item-box {
		flex: 1;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 2px 0;

      
	}

 
</style>
